<template>
	<view class="vip_center">
		<!-- <i-navBar type="whiter" title="会员中心" :bgColor="'rgba(27,21,36,'+1+')'" color="#fff"></i-navBar> -->
		<scroll-view scroll-y="true" style="height: 100vh">
			<view class="banner">
				<view style="height: 48rpx;"></view>
				<i-card padding="none" :background="vipList[userInfo.vip]">
					<view class="bodys">
						<view class="body_l">
							<image :src="'../../static/images/vip/v'+userInfo.vip+'_big_icon.png'" mode=""></image>
							<view class="yhj">
								<text :class="{vips: userInfo.vip === 4 || userInfo.vip === 5}">优惠金</text>
								<text :class="{vips: userInfo.vip === 4 || userInfo.vip === 5}"
									class="price">{{userInfo.accountAmount}}</text>
							</view>
							<view class="qy_body" @click="navTo('/pagesA/views/my_equity', 'navigateTo')">
								<text :style="{color: userInfo.vip === 4 || userInfo.vip === 5 ? '#fff' : '#2C2C2E'}">我的权益包</text>
								<view class="image">
									<image v-if="userInfo.vip === 4 || userInfo.vip === 5" src="../../static/images/right_white_icon.png"
										mode=""></image>
									<image v-else src="../../static/images/right_black_icon.png" mode=""></image>
								</view>
							</view>
						</view>
						<view class="body_r">
							<view class="images">
								<canvas id="canvas" style="width: 80px;height: 80px;" canvas-id="canvas"></canvas>
							</view>
							<text :class="{vips: userInfo.vip == 4 || userInfo.vip === 5}">我的会员码</text>
						</view>
					</view>
				</i-card>
			</view>
			<view class="radius"></view>
			<view class="boder_body">
				<view class="shop_img">
					<image src="../../static/images/czqy_icon.png"></image>
				</view>
				<view class="good_list">
					<view class="good_item" v-for="(item,index) in goodsList" :key="item.goodsId">
						<view class="item_left">
							<view class="image">
								<image :src="item.mainPic" mode=""></image>
							</view>
							<view class="item_text">
								<text class="good_name">{{item.vipGoodsName}}</text>
								<text>{{item.vipLevelLabel}} {{item.givingAmount}}优惠金</text>
								<view class="good_price">
									<i-price :size="26">{{item.discountPrice}}</i-price>
									<text>￥{{item.price}}</text>
								</view>
							</view>
						</view>
						<view class="item_r">
							<i-buttons padding="14rpx 24rpx" color="#fff" bgColor="#FB652E" radius="4"
								@click="confirm(item)">开通权益</i-buttons>
						</view>
					</view>
				</view>
			</view>
			<view class="lines"></view>
			<view class="shop_img">
				<image src="../../static/images/vip_text.png"></image>
			</view>
			<i-card background="#FCF7F5" padding="28rpx 0">
				<view class="icons">
					<view class="icon_item" v-for="(item,index) in iconList" :key="index">
						<image :src="item.url" mode=""></image>
						<text>{{item.title}}</text>
					</view>

				</view>
			</i-card>
			<view class="shop_img" style="margin: 72rpx 0 64rpx 0;">
				<image src="../../static/images/yhss_icon.png"></image>
			</view>
			<i-card background="#FCF7F5" top="20rpx" padding="10rpx 40rpx">
				<i-lineRow title="加油折扣" :diyRight="true" border="1rpx solid #F0EADD" padding="32rpx 0rpx">
					<template #right>
						<view class="ys">
							<view class="iamge">
								<image src="../../static/images/vip/sy_icon.png"></image>
							</view>
							<text>¥800</text>
						</view>
					</template>
				</i-lineRow>
				<i-lineRow title="美容养护" :diyRight="true" border="1rpx solid #F0EADD" padding="32rpx 0rpx">
					<template #right>
						<view class="ys">
							<view class="iamge">
								<image src="../../static/images/vip/sy_icon.png"></image>
							</view>
							<text>¥650</text>
						</view>
					</template>
				</i-lineRow>
				<i-lineRow title="全年洗车" :diyRight="true" border="1rpx solid #F0EADD" padding="32rpx 0rpx">
					<template #right>
						<view class="ys">
							<view class="iamge">
								<image src="../../static/images/vip/sy_icon.png"></image>
							</view>
							<text>¥360</text>
						</view>
					</template>
				</i-lineRow>
				<i-lineRow title="玻璃水/防冻液" :diyRight="true" border="1rpx solid #F0EADD" padding="32rpx 0rpx">
					<template #right>
						<view class="ys">
							<view class="iamge">
								<image src="../../static/images/vip/sy_icon.png"></image>
							</view>
							<text>¥60</text>
						</view>
					</template>
				</i-lineRow>
				<i-lineRow title="车辆检测" :diyRight="true" border="1rpx solid #F0EADD" padding="32rpx 0rpx">
					<template #right>
						<view class="ys">
							<view class="iamge">
								<image src="../../static/images/vip/sy_icon.png"></image>
							</view>
							<text>¥80</text>
						</view>
					</template>
				</i-lineRow>
				<i-lineRow title="特惠出行" :diyRight="true" border="1rpx solid #F0EADD" padding="32rpx 0rpx">
					<template #right>
						<view class="ys">
							<view class="iamge">
								<image src="../../static/images/vip/sy_icon.png"></image>
							</view>
							<text>¥310</text>
						</view>
					</template>
				</i-lineRow>
				<i-lineRow title="道路救援" :diyRight="true" border="1rpx solid #F0EADD" padding="32rpx 0rpx">
					<template #right>
						<view class="ys">
							<view class="iamge">
								<image src="../../static/images/vip/sy_icon.png"></image>
							</view>
							<text>¥140</text>
						</view>
					</template>
				</i-lineRow>
				<i-lineRow title="预计最高可省" :diyRight="true" border="none" padding="32rpx 0rpx 8rpx 0rpx">
					<template #right>
						<view class="amount">
							<text>¥2400</text>
						</view>
					</template>
				</i-lineRow>
				<view class="message">*优惠试算仅为参考</view>
			</i-card>
			<view class="message_list">
				<text>权益说明</text>
				<text>1. 黄金会员仅包含会员等级及优惠金，可用于车店商品抵扣，无权益包赠送；</text>
				<text>2. 铂金会员、钻石会员及至尊会员赠送会员等级对应的权益包，可在“我的权益包”查看，权益包有效期为1年，过期后无法使用；</text>
				<text>3. 每个权益包仅能享受一次服务，将会员码提供给商家扫描，可享受权益包对应的服务，服务后权益包变更为已使用状态；</text>
			</view>
		</scroll-view>
	</view>
</template>

<script lang="ts" setup>
	import {
		onMounted,
		computed,
		ref
	} from "vue";
	import {
		navTo
	} from '../../utils/common'
	import {
		vipGoodsList,
		vipGoodsDetail
	} from '../../api/shopping'
	import useStore from '../../stores/index'
	import _ from 'lodash'
	import UQRCode from "uqrcodejs"
	import {
		onLoad,
		onShow,
		onShareAppMessage,
		onShareTimeline
	} from '@dcloudio/uni-app'


	const store = useStore()
	const qr = new UQRCode();
	const skeleton = ref(true)
	const checkValue = ref(true)
	const goodsList = ref<Array<any>>([])
	const ctx = ref<any>(null)

	const vipList = [
		'linear-gradient(to right, #fefbf8 0%, #fefbf8 100%)',
		'linear-gradient(to right, #efd9cf 0%, #e5c7b4 100%)',
		'linear-gradient(to right, #cee3ef 0%, #b2cce3 100%)',
		'linear-gradient(to right, #dcceee 0%, #d4b2e3 100%)',
		'linear-gradient(to right, #554842 0%, #332a25 100%)',
		'linear-gradient(to right, #554842 0%, #332a25 100%)',
	]
	const iconList = [{
		url: '../../static/images/vip/zkjy.png',
		title: '折扣加油',
	},
	{
		url: '../../static/images/vip/mryh.png',
		title: '美容养护',
	},
	{
		url: '../../static/images/vip/thcx.png',
		title: '特惠出行',
	},
	{
		url: '../../static/images/vip/acjc.png',
		title: '爱车检测',
	},
	{
		url: '../../static/images/vip/dljy.png',
		title: '道路救援',
	},
	{
		url: '../../static/images/vip/hbls.png',
		title: '换玻璃水',
	},

	]
	const userInfo = computed(() => {
		return store.userInfo
	})

	const confir = async (item : any) => {
		store.setGoodOrder(item)
		if (item.vipLevel === 1) {
			navTo('/pages/views/confirm_order', 'navigateTo')
			return
		}
		navTo(`/pages/views/shop_detail`, 'navigateTo')
	}

	const confirm = _.debounce(confir, 600, { leading: true, trailing: false })

	const vipGoodsLists = async () => {
		const {
			data
		} = await vipGoodsList()
		goodsList.value = data
	}

	const getQR = () => {
		uni.showLoading({
			title: '会员码生成中...'
		})
		qr.data = userInfo.value.invitation
		qr.size = 80;
		qr.make();
		qr.canvasContext = ctx.value;
		qr.drawCanvas();
		uni.hideLoading()
	}

	onMounted(() => {
		//#ifdef MP-WEIXIN
		wx.showShareMenu({
			withShareTicket: true,
			menus: ['shareAppMessage', 'shareTimeline']
		});
		//#endif
		ctx.value = null
		ctx.value = uni.createCanvasContext('canvas')
		vipGoodsLists()
		getQR()
	})

	onShareAppMessage(() => {
		return {
			title: '会员中心',
			path: '/pages/views/vip_center',
			// imageUrl: 'https://tyj-apk-1258993110.cos.ap-nanjing.myqcloud.com/images/share_01%402x.png'
		}
	})
	onShareTimeline(() => {
		return {
			title: '会员中心',
			path: '/pages/views/vip_center',
			// imageUrl: 'https://tyj-apk-1258993110.cos.ap-nanjing.myqcloud.com/images/share_01%402x.png'
		}
	})
	onShow(() => {
		store.setUserInfo()
	})
</script>

<style lang="scss" scoped>
	.vip_center {
		width: 100%;
		height: 100vh;
		overflow: hidden;

		.banner {
			width: 100%;
			height: 480rpx;
			background: linear-gradient(#37312E 100%, #1A1614 100%);


			.bodys {
				width: calc(100% - 80rpx);
				margin: 0 auto;
				height: 320rpx;
				@include flexRS;

				.body_l {
					height: 72%;
					@include flexC;
					justify-content: space-between;

					image {
						width: 244rpx;
						height: 48rpx;
						// margin-bottom: 80rpx;
					}

					.yhj {
						@include flexR;

						text {
							@include contentfont(28rpx);
						}

						.price {
							@include dprice(32rpx);
							margin-left: 8rpx;
							margin-top: 1rpx;
						}

					}
				}

				.body_r {
					@include flexCC;

					.images {
						width: 200rpx;
						height: 200rpx;
						@include flexCC;
						background: #FFFFFF;
						border-radius: 24rpx;
					}

					text {
						margin-top: 16rpx;
						@include contentfont(20rpx);
					}
				}
			}

			.qy_body {
				@include flexR;
				margin-top: 32rpx;

				text {
					@include titlefont(28rpx);

				}

				.image {
					width: 48rpx;
					height: 48rpx;

					image {
						width: 48rpx;
						height: 48rpx;
					}
				}

			}

		}

		.radius {
			width: 100%;
			height: 24rpx;
			background-color: #fff;
			border-radius: 24rpx 24rpx 0rpx 0rpx;
			margin-top: -24rpx;
		}

		.boder_body {
			width: calc(100% - 64rpx);
			background-color: #fff;
			margin: 0 auto;


			.good_list {
				@include flexC;

				.good_item {
					margin: 32rpx 0;
					border-radius: 24rpx;
					@include flexRS;
					align-items: flex-end;

					.item_left {
						@include flexR;

						.image {
							width: 160rpx;
							height: 160rpx;
							border-radius: 8rpx;
							margin-right: 24rpx;

							image {
								width: 160rpx;
								height: 160rpx;
								border-radius: 8rpx;
							}
						}

						.item_text {
							@include flexC;

							text {
								@include contentfont;
							}

							.good_name {
								@include titlefont;
								@include overflow;
								margin-bottom: 16rpx;
							}

							.good_price {
								margin-top: 16rpx;
								@include flexR;

								text {
									text-decoration: line-through;
									@include contentfont;
									margin-left: 8rpx;
									margin-top: 8rpx;
								}
							}
						}
					}
				}

				.active {
					border: 4rpx solid $theme-color;
				}
			}
		}

		.lines {
			width: 100%;
			height: 16rpx;
			background: $background-color;
			margin: 24rpx 0 48rpx 0;
		}

		.bottom {
			position: fixed;
			bottom: 0;
			width: 100%;
			background-color: #fff;
			border-top: 1rpx solid #E6E6F0;

			.buttons {
				width: calc(100% - 48rpx);
				margin: 20rpx auto;
				height: 88rpx;
				background: #16161F;
				border-radius: 44rpx;
				@include flexRS;

				.confirm {
					height: 88rpx;
					line-height: 88rpx;
					background-color: $theme-color;
					padding: 0 76rpx;
					border-radius: 44rpx;
					@include titlefont(32rpx);
					color: #fff;
				}
			}

			.agree {
				margin: 32rpx 0;
				@include flexRC;
				@include contentfont(26rpx);
			}
		}
	}

	.ys {
		@include flexRS;
		width: 142rpx;

		.iamge {
			width: 60rpx;
			height: 32rpx;
			margin-right: 24rpx;

			image {
				width: 60rpx;
				height: 32rpx;
			}
		}



		text {
			@include dprice(32rpx);
			font-weight: bold;
		}
	}

	.amount {
		@include dprice(48rpx);
	}

	.message {
		@include dfont(24rpx);
		color: #ccc;
		text-align: right;
		margin-bottom: 18rpx;
	}

	.message_list {
		width: calc(100% - 64rpx);
		margin: 0 auto;
		margin-top: 64rpx;
		@include flexC;
		padding-bottom: 80rpx;

		text {
			@include contentfont(24rpx);
			margin-bottom: 10rpx;
		}
	}

	.icons {
		@include flexRS;
		flex-wrap: wrap;

		.icon_item {
			// width: 160rpx;
			@include flexCC;
			margin: 20rpx 60rpx;

			image {
				width: 88rpx;
				height: 88rpx;
				margin-bottom: 16rpx;
			}

			text {
				@include dfont(26rpx);
			}
		}
	}

	.shop_img {
		margin: 40rpx 0;
		@include flexRC;

		image {
			width: 304rpx;
			height: 40rpx;
		}
	}

	.vips {
		color: #fff !important;
	}
</style>